<!-- Table -->
<template>
  <div>
    <!-- Form -->

    <el-button type="primary" icon="el-icon-edit" size="mini" @click="goEdit"
      >编辑</el-button
    >
    <div class="middle_s"></div>
    <el-dialog title="编辑条目" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="主体" :label-width="formLabelWidth">
          <el-input
            :disabled="true"
            v-model="form.subject"
            autocomplete="off"
            :placeholder="form.subject"
          ></el-input>
        </el-form-item>

        <el-form-item
          prop="relation"
          v-if="isRelation"
          label="联系"
          :label-width="formLabelWidth"
        >
          <el-input
            :disabled="true"
            v-model="form.relation"
            autocomplete="off"
            :placeholder="form.relation"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="!isRelation"
          label="联系"
          prop="relation"
          style="text-align: left"
          :label-width="formLabelWidth"
          :disabled="true"
        >
          <el-autocomplete
            popper-class="my-autocomplete"
            v-model="form.relation"
            :fetch-suggestions="querySearch"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
            </template>
          </el-autocomplete>
        </el-form-item>

        <el-form-item prop="object" label="客体" :label-width="formLabelWidth">
          <el-input v-model="form.object" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import requests from '@/api/ajax';
import { reqItem } from '@/api';
// import axios from 'axios';
export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {},
      form_r: {},
      formLabelWidth: '120px',
      restaurants: [],
      state: '',
      relat: '',
      rules: {
        relation: [
          { required: true, message: '请输入联系', trigger: 'blur' },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        object: [
          { required: true, message: '请输入客体', trigger: 'blur' },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
      },
    };
  },
  props: ['itemId', 'isFixed', 'isRelation'],

  methods: {
    async goEdit() {
      let result = await reqItem(this.itemId);
      if (result.code == 1) {
        this.$set(this.form, 'subject', result.data.subject);
        this.$set(this.form, 'relation', result.data.relation);
        this.$set(this.form, 'object', result.data.object);
      }
      this.dialogFormVisible = true;
    },

    save() {
      this.form.id = this.itemId;
      this.dialogFormVisible = false;
      requests.put('/changes', this.form).then((res) => {
        if (res.code == 1) {
          this.$notify.success('更新成功');
          this.form = {};
          this.$store.dispatch('getAllItemList', this.$route.query.id);
          this.$store.dispatch('getItemList', this.$route.query.id);
          this.$store.dispatch('getAcademyPoint', this.$route.query.id);
          this.$store.dispatch('getAcademyLink', this.$route.query.id);
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      return [{ value: '创建人' }, { value: '重建于' }, { value: '重建人' }];
    },

    handleSelect(item) {},
    handleIconClick(ev) {},
  },
};
</script>
<style scoped lang="less">
.middle_s {
  height: 10px;
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>
